<template>
    <div class="exam-info-container">
      <!-- 考试基本信息表格 -->
      <div class="exam-basic-info">
        <h3>考试信息</h3>
        <el-table
          :data="basicInfo"
          border
          style="width: 100%"
          :show-header="false"
        >
          <el-table-column prop="key" width="150"></el-table-column>
          <el-table-column prop="value"></el-table-column>
          <el-table-column prop="key2" width="150"></el-table-column>
          <el-table-column prop="value2"></el-table-column>
        </el-table>
      </div>
  
      <!-- 考试记录表格 -->
      <div class="exam-records">
        <h3>考试信息</h3>
        <el-table
          :data="examRecords"
          border
          style="width: 100%"
        >
          <el-table-column prop="id" label="序号" width="80" align="center"></el-table-column>
          <el-table-column prop="name" label="考试频次" width="200"></el-table-column>
          <el-table-column prop="examTime" label="考试时间" width="220"></el-table-column>
          <el-table-column prop="answerTime" label="答卷时间" width="220"></el-table-column>
          <el-table-column prop="status" label="状态" width="100" align="center"></el-table-column>
          <el-table-column prop="score" label="分数" width="100" align="center"></el-table-column>
          <el-table-column prop="passed" label="是否及格" width="100" align="center"></el-table-column>
        </el-table>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        basicInfo: [
          {
            key: "考试名称",
            value: "2023年语文期中考试",
            key2: "考试时间",
            value2: "2023-05-22 14:00:00-16:00:00"
          },
          {
            key: "参加限制",
            value: "考试开始15分钟",
            key2: "答题时间",
            value2: "60分钟"
          },
          {
            key: "交卷限制",
            value: "考试结束之前15分钟",
            key2: "考试说明",
            value2: "常规考试"
          }
        ],
        examRecords: [
          {
            id: 1,
            name: "2023年语文期中考试",
            examTime: "2023-05-12 09:23:11-09:23:11",
            answerTime: "2023-05-12 09:23:11-09:23:11",
            status: "正常",
            score: "100",
            passed: "及格"
          },
          {
            id: 2,
            name: "2023年语文期二次月考",
            examTime: "2023-05-12 09:23:11-09:23:11",
            answerTime: "2023-05-12 09:23:11-09:23:11",
            status: "缺考",
            score: "",
            passed: ""
          },
          {
            id: 3,
            name: "2023年语文期二次月考",
            examTime: "2023-05-12 09:23:11-09:23:11",
            answerTime: "2023-05-12 09:23:11-09:23:11",
            status: "正常",
            score: "60",
            passed: "及格"
          }
        ]
      };
    }
  };
  </script>
  
  <style scoped>
  .exam-info-container {
    padding: 20px;
    background-color: #fff;
  }
  
  .exam-basic-info,
  .exam-records {
    margin-bottom: 30px;
  }
  
  h3 {
    margin-bottom: 15px;
    font-size: 16px;
    color: #333;
  }
  
  .el-table {
    font-size: 14px;
  }
  
  .el-table th {
    background-color: #f5f7fa;
    color: #606266;
    font-weight: bold;
  }
  
  .el-table--border {
    border: 1px solid #ebeef5;
  }
  
  .el-table--border td,
  .el-table--border th {
    border-right: 1px solid #ebeef5;
  }
  </style>